<template>
  <div class="order-operation">
    <el-collapse class="search-block" style="width: 1200px">
      <el-collapse-item title="条件搜索">
        <el-form ref="searchOrderForm" :model="searchOrderForm" label-position="top">
          <el-form-item class="search-item" label="订单编号" prop="orderId">
            <el-input type="text" v-model="searchOrderForm.orderId" style="width: 300px" placeholder="请输入订单编号" />
          </el-form-item>
          <el-form-item class="search-item" label="产品编号" prop="goodId">
            <el-input type="text" v-model="searchOrderForm.goodId" style="width: 200px" placeholder="请输入产品编号" />
          </el-form-item>
          <el-form-item class="search-item" label="产品名" prop="goodTitle">
            <el-input type="text" v-model="searchOrderForm.goodTitle" style="width: 200px" placeholder="请输入产品名"
              maxlength="10" />
          </el-form-item>
          <el-form-item class="search-item" label="客户编号" prop="userId">
            <el-input type="text" v-model="searchOrderForm.userId" style="width: 200px" placeholder="请输入客户编号" />
          </el-form-item>
          <el-form-item class="search-item" label="客户姓名" prop="username">
            <el-input type="text" v-model="searchOrderForm.username" style="width: 200px" placeholder="请输入客户姓名"
              maxlength="10" />
          </el-form-item>

          <el-form-item label="创建时间" class="search-item" prop="createTime">
            <div class="block">
              <el-date-picker v-model="searchOrderForm.createTime" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="支付时间" class="search-item" prop="payTime">
            <div class="block">
              <el-date-picker v-model="searchOrderForm.payTime" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="订单状态" class="search-item" prop="status">
            <div class="block">
              <el-select v-model="searchOrderForm.status" placeholder="请选择订单状态">
                <el-option label="未支付" value="0"></el-option>
                <el-option label="已支付" value="1"></el-option>
                <el-option label="已过期" value="2"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <div class="search-button" style="margin-top: 100px">
            <el-button type="warning" icon="el-icon-search" @click="getOrderTableList()">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="resetSearchForm('searchOrderForm')">重 置</el-button>
          </div>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <div class="order-table">
      <el-table :data="orderTableList" stripe v-loading="orderTableLoading">
        <el-table-column prop="orderId" label="订单编号" align="center" width="200px" show-overflow-tooltip />
        <el-table-column prop="goodId" label="产品编号" align="center" width="100px" show-overflow-tooltip />
        <el-table-column prop="goodTitle" label="产品名" align="center" width="120px" show-overflow-tooltip />
        <el-table-column prop="orderPrice" label="订单价格/元" align="center" width="120px" show-overflow-tooltip />
        <el-table-column prop="userId" label="客户编号" align="center" width="100px" show-overflow-tooltip />
        <el-table-column prop="username" label="客户名称" align="center" width="100px" show-overflow-tooltip />

        <el-table-column prop="status" label="订单状态" align="center" width="100px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '0'" type="info">未支付</el-tag>
            <el-tag v-else-if="scope.row.status === '1'" type="success">已支付</el-tag>
            <el-tag v-else type="danger">已过期</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center" width="180px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              scope.row.createTime | dateFormat("yyyy-mm-dd hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间" align="center" width="180px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.payTime !== null">{{
              scope.row.payTime | dateFormat("yyyy-mm-dd hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getOrderTableList" />
    </div>
  </div>
</template>

<script>
import { getOrderList } from "@/api/order";
export default {
  name: "OrderOperation",
  data() {
    return {
      orderTableList: [],
      orderTableLoading: false,
      searchOrderForm: {
        orderId: "",
        goodId: "",
        goodTitle: "",
        userId: "",
        username: "",
        createTime: "",
        payTime: "",
        status: "",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        orderId: "",
        goodId: "",
        goodTitle: "",
        userId: "",
        username: "",
        status: "",
        firstCreateTime: "",
        secCreateTime: "",
        firstPayTime: "",
        secPayTime: "",
      },
      total: 0,
    };
  },
  created() {
    this.getOrderTableList();
  },
  methods: {
    getOrderTableList() {
      this.packParams();
      this.orderTableLoading = true;
      getOrderList(this.queryParams)
        .then((res) => {
          this.orderTableList = res.rows;
          this.total = res.total;
          this.orderTableLoading = false;
        })
        .catch((err) => {
          this.userTableLoading = false;
        });
    },
    packParams() {
      let form = this.searchOrderForm;
      if (form.userId != null && form.userId != "") {
        if (isNaN(form.userId)) {
          this.$message.error("客户编号是数字");
          return;
        }
      }
      if (form.goodId != null && form.goodId != "") {
        if (isNaN(form.goodId)) {
          this.$message.error("产品编号是数字");
          return;
        }
      }
      this.queryParams.orderId = form.orderId;
      this.queryParams.goodId = form.goodId;
      this.queryParams.goodTitle = form.goodTitle;
      this.queryParams.userId = form.userId;
      this.queryParams.username = form.username;
      this.queryParams.status = form.status;
      this.queryParams.firstCreateTime =
        form.logTime === null ? null : form.createTime[0];
      this.queryParams.secCreateTime =
        form.logTime === null ? null : form.createTime[1];
      this.queryParams.firstPayTime =
        form.logTime === null ? null : form.payTime[0];
      this.queryParams.secPayTime =
        form.logTime === null ? null : form.payTime[1];
    },
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.getOrderTableList();
    },
  },
};
</script>

<style>
.search-block {
  margin-bottom: 20px;
}

.el-collapse-item__header {
  color: #4091ff !important;
  font-size: 15px;
}

.search-item {
  display: inline-block;
  margin-left: 20px;
}

.el-form-item__label {
  padding-bottom: 0px !important;
}

.search-button {
  float: right;
  margin-bottom: 20px;
}
</style>